<template>
  <div class="home">
    <div class="context">
      <div class="header">
        <h1>{{ title }}</h1>
        <h5>创建时间：{{ bytime }}</h5>
      </div>
      <div class="ct_text">
        <article v-html="value"></article>
        <div class="ct_b">
          <el-tag type="success" class="ctb_a"
            ><i class="el-icon-edit"></i>{{ type }}</el-tag
          >
          <el-dropdown class="ctb_b" @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">
                <i class="el-icon-chat-dot-square"></i>回帖</el-dropdown-item
              >
              <el-dropdown-item command="c"
                ><i class="el-icon-document-add"></i>收藏</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 发帖人 -->
      <div class="user">
        <el-card class="usercard">
          <el-avatar
            class="uc_a"
            shape="square"
            :size="100"
            fit="fill"
            :src="url"
          ></el-avatar>
          <div class="uc_right">
            <div class="ucr_con">
              <el-tag effect="dark">姓名:</el-tag>
              <el-tag style="margin-right: 10px" effect="dark">{{
                username
              }}</el-tag>
              <el-tag effect="dark" type="success">性别:</el-tag>
              <el-tag effect="dark" type="success">
                <i class="el-icon-female" v-if="sex == 1"></i>
                <i class="el-icon-male" v-else></i>
              </el-tag>
            </div>
            <hr />
            <div class="ucr_con" style="background: rgba(248, 248, 248, 0.308)">
              <el-tag effect="dark" type="success">格言:</el-tag>
              <b>{{ geyan }}</b>
            </div>
          </div>
        </el-card>
      </div>
      <!-- //评论区 -->
      <div class="pinglun">
        <div class="p_header">
          <span class="ctb_a"
            ><i class="el-icon-chat-line-square"></i>{{ pinglun }}</span
          >
          <el-tooltip effect="dark" content="回帖" placement="bottom">
            <el-button
              @click="drawer = true"
              style="margin-top: 10px"
              class="ctb_b"
              size="small"
              type="warning"
              icon="el-icon-message"
              circle
            ></el-button>
          </el-tooltip>
        </div>
        <div class="p_content">
          <!-- -- -->
          <div class="c_item" v-for="item in listDate">
            <div class="c_it_content">
              <div class="avatars">
                <div class="av_h">
                  <el-avatar
                    size="large"
                    :src="item.attribute.imgUrl"
                  ></el-avatar>
                </div>
              </div>
              <div class="avatars">
                <div class="b">
                  <span>
                    <el-tag type="danger" size="small">{{
                      item.attribute.userName
                    }}</el-tag></span
                  >
                  <span>.评论时间：{{ item.attribute.bytime }}</span>
                </div>
                <div class="span">
                  <article v-html="item.attribute.commentText"></article>
                </div>
              </div>
              <!-- 回复 -->
              <div
                class="hf"
                v-for="(o, index) in item.childNodes"
                :key="index"
              >
                <div class="avatars">
                  <div class="b">
                    <span>
                      <el-tag type="success" size="small">{{
                        o.attribute.userName
                      }}</el-tag></span
                    >
                    <span>.回复时间：{{ o.attribute.bytime }}</span>
                  </div>
                  <div class="span">
                    <article v-html="o.attribute.commentText"></article>
                  </div>
                </div>
                <!-- <div class="c_item_right" v-if="o.attribute.commentId==tieCode">
             <i class="el-icon-delete"></i>
        </div> -->
              </div>
            </div>
            <div class="c_item_right">
              <span>
                <el-dropdown class="ctb_b">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="huiFu(item.attribute.commentCode)"
                      icon="el-icon-chat-dot-square"
                    >
                      回复</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown></span
              >
            </div>
          </div>
          <!-- -- -->
        </div>
      </div>
    </div>
    <el-dialog title="回帖" width="40%" :visible.sync="drawer">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.text"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPingLun1(form.text, form.codes)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 回复 -->

    <el-dialog title="回复" width="40%" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.text"
            autocomplete="off"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPingLun(form.text, form.codes)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <div class="lastfoot"></div>
  </div>
</template>
<script>
import { getListDataByInviteCode, getPingLunByInviteCode,addCensus,collection,writePinglun,writeReply } from "../api/cate";
import { getUserByUserCode } from "../api/user";
export default {
  name: "show",
  data() {
    return {
      listDate: [],
      form: {
        codes: "",
        text: "",
      },
      url: "",
      type: "", //帖子类型
      username: "", //用户名
      title: "", //标题
      bytime: "", //创建时间
      geyan: "", //用户格言
      inviteCode: "",
      tieCode: "",
      pinglun: 100,
      handbook: "",
      texts: "",
      userCode: "1",
      sex: 1,
      drawer: false,
      value: "", //富文本编辑器内容
      defaultData: "preview",
      dialogFormVisible: false,
    };
  },
  activated: function () {
    this.inviteCode = this.$route.query.inviteCode;
    this.getData();
    this.getPingLun();
    this.tieCode = sessionStorage.getItem("userCode")
    this.getNumbers();
  },
  methods: {
    //获取帖子数据
    getData() {
      this.loading.startLoading();
      let obj = {
        inviteCode: this.inviteCode,
      };
      getListDataByInviteCode(obj).then((res) => {
        if (res.data.code === 200) {
          this.title = res.data.data.ListData[0].inviteTitle;
          this.bytime = res.data.data.ListData[0].bytime;
          this.value = res.data.data.ListData[0].inviteContent;
          this.type = res.data.data.ListData[0].type;
          this.userCode = res.data.data.ListData[0].userCode;
          this.pinglun = res.data.data.ListData[0].pinglunNum;
          this.getUser(res.data.data.ListData[0].userCode);
          this.loading.endLoading();
        } else {
          this.$message.error("查询失败失败");
          res.data.data.list;
        }
      });
    },
    //获取帖子对应用户信息
    getUser(val) {
      let obj1 = {
        userCode: val,
      };
      getUserByUserCode(obj1).then((res) => {
        if (res.data.code === 200) {
          this.username = res.data.data.userName;
          this.sex = res.data.data.userSex;
          this.geyan = res.data.data.geyan;
          this.url = res.data.data.userUrl;
          this.loading.endLoading();
        } else {
          this.$message.error("查询用户信息失败");
          res.data.data.list;
        }
      });
    },
    // 获取评论
    getPingLun() {
      let objs = {
        inviteCode: this.inviteCode,
      };
    
        getPingLunByInviteCode(objs)
          .then((res) => {
            if (res.data.code === 200) {
              this.listDate = res.data.data.comments;
              //  console.log(getUser(res.data.data.attribute.commentId));
            }
          })
          .catch((error) => {
            this.$message.error("查询失败");
          });
      
    },
    //帖子访问人数统计
    getNumbers() {
      // addCensus
      let objs = {
        inviteCode: this.inviteCode,
        level: "1",
        userCode: this.tieCode,
      };
      addCensus(objs)
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error("统计失败");
        });
    },
    //收藏帖子
    addCensus() {
      // addCensus
      let objs = {
        inviteCode: this.inviteCode,
        userCode: this.tieCode,
      };
     collection(objs)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: "收藏帖子成功！",
              type: "success",
            });
          } else {
            const h = this.$createElement;
            this.$message({
              message: h("p", null, [
                h("span", { style: "color: teal" }, "你已经收藏了本帖 "),
              ]),
            });
          }
        })
        .catch((error) => {
          this.$message.error("收藏失败");
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeData(value, render) {
      // this.handbook = render;
      this.texts = render;
      console.log(this.handbook);
    },
    handleCommand(command) {
      if (command == "a") {
        this.drawer = true;
      }
      if (command == "c") {
        this.addCensus();
      }
    },
    //回帖
    setPingLun1(val, s) {
      let obj = {
        userCode: this.tieCode,
        commentText: val,
        inviteCode: this.inviteCode,
      };
      writePinglun(obj)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: "恭喜你，评论成功！",
              type: "success",
            });
            this.drawer = false;
            this.dialogFormVisible = false;
            this.form.text="";
            this.form.code="";
            this.pinglun += 1;
            this.getPingLun();
          }
        })
        .catch((error) => {
          this.$message.error("回复失败");
        });
    },
    //回复
    setPingLun(val, s) {
      let obj = {
        userCode: this.tieCode,
        commentText: val,
        inviteCode: this.inviteCode,
        commentCode: s,
      };
     writeReply(obj)
        .then((res) => {
          if (res.data.code === 200) {
            this.listDate = "";
            this.$message({
              message: "恭喜你，评论成功！",
              type: "success",
            });
            this.drawer = false;
            this.dialogFormVisible = false;
            this.form.text="";
            this.form.code="";
            this.pinglun += 1;
            this.getPingLun();
          }
        })
        .catch((error) => {
          this.$message.error("回复失败");
        });
    },
    huiFu(val) {
      console.log("==========");
      this.form.codes = val;
      (this.dialogFormVisible = true), console.log(val);
    },
    beforeDestroy: function () {
      console.group("beforeDestroy 销毁前状态===============》");
    },
    destroyed: function () {
      console.group("destroyed 销毁完成状态===============》");
    },
  },
};
</script>

<style scoped>
.home {
  /* background-image: url(https://static.hacpai.com/images/holiday/blockchain-bg.png); */
  background: #cccfd1;
  width: 100%;
  height: 650px;
  text-align: center;
  margin: 0 auto;
  overflow: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.mavonEditor {
  width: 100%;
  height: 300px;
}
.context {
  padding: 20px;
  background: rgb(255, 255, 255);
  padding-top: 20px;
  width: 65%;
  margin: 0 auto;
}
.ct_text {
  text-align: left;
  border-bottom: 1px solid rgb(89, 108, 124);
  overflow-x: scroll;
}
.user {
  margin-top: 50px;
  width: 100%;
  height: 200px;
}

.usercard {
  width: 100%;
  height: 180px;
  background: rgba(164, 183, 199, 0.576);
  background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=453180754,3269959371&fm=26&gp=0.jpg);
  line-height: 180px;
}
.ct_b {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.ctb_a {
  float: left;
}
.ctb_b {
  float: right;
}
.uc_a {
  float: left;
  margin-top: 40px;
  margin-left: 10px;
}
.uc_right {
  height: 180px;
  /* padding-top: 20px; */
  margin-left: 20px;
  width: 80%;
  float: left;
}
.ucr_con {
  width: 100%;
  height: 88px;
  line-height: 88px;
  text-align: left;
  /* background: #ccc */
}
.pinglun {
  width: 100%;
  padding-bottom: 100px;
  display: inline-block;
  overflow: hidden;
  background-color: #fbfafa;
}
.p_header {
  height: 50px;
  line-height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.p_content {
  width: 100%;
  margin-top: 20px;
  /* border-bottom: 1px solid #ccc; */
}

.c_item {
  width: 100%;
  float: left;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 5px;
  border-bottom: 1px solid #ccc;
}
.c_it_content {
  width: 50%;
  float: left;
}
.avatars {
  margin-right: 15px;
  /* height: 60px; */
  line-height: 30px;
  float: left;
}
.avatars .av_h {
  padding-top: 10px;
}
.avatars .span {
  padding-left: 5px;
  width: 320px;
  text-align: left;
  cursor: pointer;
}
.avatars .b {
  height: 50%;
  color: rgb(17, 245, 176);
  padding-left: 5px;
  width: 280px;
  text-align: left;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.c_item_right {
  height: 70px;
  line-height: 70px;
  float: right;
}
.hf {
  padding-left: 100px;
  width: 500px;
}
.lastfoot {
  width: 100%;
  height: 200px;
}
</style>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-card__body {
  padding: 0px;
}
.nossr {
  position: absolute;
  width: 100%;
  height: 200px;
}
</style>